 /* Style for regular elements (tasks, events, gateways) */
 .highlight:not(.djs-connection) .djs-visual> :nth-child(1) {
     stroke: rgb(0, 114, 206) !important;
 }

 /* Style for sequence flows (connections) */
 .highlight.djs-connection .djs-visual path {
     stroke: rgb(0, 114, 206) !important;
     stroke-width: 2px !important;
 }

 /* Style for sequence flow markers/arrows */
 .highlight.djs-connection .djs-visual> :nth-child(2) path {
     fill: rgb(0, 114, 206) !important;
     stroke: rgb(0, 114, 206) !important;
 }

 .tree ul li {
     margin-left: 1rem;
     /* indent all nested levels */
 }

 html,
 body {
     height: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
 }

 #root {
     height: 100%;
 }

 /* Overall Styling */
 body {
     font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     background-color: #f8f9fa;
     color: #343a40;
     line-height: 1.6;
     padding: 0;
 }

 /* Header styling */
 h1 {
     font-weight: 600;
     font-size: 2rem;
     border-bottom: 1px solid #dee2e6;
     margin-bottom: 0rem;
     padding-left: 1rem;
     padding-bottom: 1rem;
     background-color: #f4f4f4;
 }

 h4 {
     color: #495057;
     font-weight: 600;
     margin-bottom: 1rem;
 }

 h5 {
     color: #495057;
     font-size: 1.1rem;
     margin-top: 1.5rem;
     font-weight: 600;
 }

 /* Main container */
 .container-fluid {
     padding: 0;
 }

 /* Tree navigation panel */
 .col-auto.border-end {
     background-color: #f4f4f4;
     border-right: 1px solid #dee2e6 !important;
     padding: 1.5rem 0.75rem;
     min-width: 300px;
     box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.05);
     max-height: calc(100vh - 80px);
     overflow-y: auto;
 }


 /* Tree nodes styling */
 .tree {
     padding-left: 0.5rem;
 }

 .tree-node {
     padding: 0.4rem 0.5rem;
     border-radius: 4px;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
     margin-bottom: 2px;
     color: #495057;
 }

 .tree-node:hover {
     background-color: #E6E7E8;
     text-decoration: none;
     cursor: pointer;
 }

 /* Tree node icons */
 .tree-node:before {
     margin-right: 0.5rem;
 }

 /* BPMN Canvas */
 div[ref="canvasRef"] {
     border-radius: 8px !important;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     border: 1px solid #dee2e6 !important;
 }

 /* Progress bars */
 .progress {
     height: 12px !important;
     background-color: #e9ecef;
     border-radius: 1rem;
     overflow: hidden;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 .progress-bar {
     border-radius: 1rem;
     background-color: #26D07C !important;
 }

 /* Cards styling */
 .card {
     border: none;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s;
 }

 .card:hover {
     transform: translateY(-3px);
 }

 .card-body {
     padding: 1.5rem;
 }

 .card-title {
     font-size: 1.75rem;
     font-weight: 700;
 }

 /* List groups */
 .list-group-item {
     border-left: none;
     border-right: none;
     padding: 0.75rem 1.25rem;
 }

 .list-group-item:first-child {
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }

 .list-group-item:last-child {
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
 }

 /* Badges */
 .badge {
     font-weight: 500;
     padding: 0.35em 0.65em;
     border-radius: 0.5rem;
 }

 .badge.bg-secondary {
     background-color: #888B8D !important;
 }

 .badge.bg-info {
     background-color: #00A7B5 !important;
 }

 .badge.bg-primary {
     background-color: #0072CE !important;
 }

 /* Tree node icons */
 .tree-node {
     font-weight: 500;
 }

 .tree li {
     list-style-type: none;
 }

 /* Hover effect for list items */
 .list-group-item:hover {
     background-color: #E6E7E8;
     cursor: pointer;
 }
